import Child from './components/child'
// 1.普通导入方式
// import './index.scss'
// 2.样式模块导入方式
import stys from './index.module.scss'

import { Table, Tag, Space } from 'antd'
// console.log(stys)

/* 组件样式使用总结：
    1.同名样式会相互覆盖
    2.后倒入的样式会覆盖先导入的样式（规则）
*/
function Test() {
  // 表格数据
  // 1.指定表格每列展示的数据
  const columns = [
    {
      title: '名字',
      dataIndex: 'name', // 指定当前列显示list数据的属性名
      key: 'name',
      // 自定义当前列的显示
      /* 有点像vue的作用域插槽
          text当前的值
          row当前列的值
      */
      render: (text, row) => {
        // console.log(text, row)
        return <a>{text}</a>
      },
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
  ]
  // 2.指定表格展示的后台数据
  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ]
  return (
    <div>
      <h1 className={stys[('bd-index', 'bdBlue')]}>父组件</h1>
      <h2 className={[stys.bdBlue, stys.box].join(' ')}>父组件</h2>
      <h3 className="fontColor bgcolorBlue">全局样式</h3>
      <hr />
      <Child />
      <Table columns={columns} dataSource={data} />
    </div>
  )
}

export default Test
